<template>
  <section class="classifycontent">
    <nav class="nav_1" v-if="showNav">
      <i class="cubeic-back" @click="backClick"></i>
      {{this.navTitle}}
    </nav>
    <nav class="nav_2" v-if="!showNav" :style="opacityActive">
      <i class="cubeic-back" @click="backClick"></i>
      {{this.navTitle}}
    </nav>
    <ul class="box">
      <router-link
        tag="li"
        :to="'/footer/home/details/' + item.id"
        v-for="item of classifyData"
        :key="item.id"
      >
          <img class="contImage" v-lazy="item.imgUrl"/>
          <div class="content">
            <p class="text">{{item.text}}</p>
            <div class="price">
              <span>￥{{item.price + item.count}}</span>
              <span v-if="item.removePrice">￥{{item.removePrice}}</span>
              <img @click="cartClick(item.id)" src=""/>
            </div>
          </div>
      </router-link>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'classifyContent',
  data () {
    return {
      navTitle: '',
      classifyData: [],
      showNav: true,
      opacityActive: {
        opacity: 0
      }
    }
  },
  created () {
    this.getClaaifyData(this.$route.params.id)
  },
  methods: {
    async getClaaifyData (id) {
      const result = await this.axios.get('/homeClassifyList/' + id)
      // console.log(result)
      const data = result
      for (let i in data) {
        for (let j in data[i]) {
          console.log(data[i][0].items)
          this.classifyData = data[i][0].items
          this.navTitle = data[i][1].title
          return // 跳出循环
        }
      }
    },
    backClick () {
      this.$router.go(-1)
    },
    handleScroll () {
      let top = document.documentElement.scrollTop
      // console.log(top)
      if (top > 20) {
        let opacity = top / 40
        opacity = opacity > 1 ? 1 : opacity
        this.opacityActive = { opacity: opacity }
        this.showNav = false
      } else {
        this.showNav = true
      }
    },
    cartClick (id) {
      alert(id)
      this.axios.get('/homeClassifyList/' + this.$route.params.id)
        .then((res) => {
          for (let i in res) {
            for (let j in res[i]) {
              console.log(res[i][0].items[id])
              return
            }
            return
          }
        })
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../../../../../assets/styl/color.styl'
  .classifycontent
    width 100%
    nav
      text-align center
      position fixed
      top 0
      z-index 99
      width 100%
      padding 13px 0
      font-size 16px
      color #333
      .cubeic-back
        position absolute
        font-size 18px
        left 3%
    .nav_1
      background white
      color #333
    .nav_2
      background linear-gradient(to right, #B7363B, #EF6B47)
      color #fff
      transition all .3s ease
    .box
      margin 53px 12px 60px 12px
      display flex
      flex-direction row
      flex-wrap wrap
      align-content stretch
      box-sizing border-box
      li
        width 49%
        background #fff
        margin 0 0 2% 2%
        .contImage
          width 100%
        .content
          padding 0 10px
          .text
            ellipsis2()
            font-size 13px
            line-height 1.3
            color #505050
            margin 3px 0 15px
          .price
            margin-bottom 8px
            position relative
            span:first-child
              font-size 17px
              color rgb(239, 84, 0)
            span:nth-child(2)
              color rgb(153, 153, 153)
              font-size 12px
              text-decoration line-through
            img
              position absolute
              right 4%
              width 25px
          .label // 满减样式
            background #ff8d9b
            font-size 12px
            color: #ffffff
            padding 2px 5px 0
      li:nth-child(odd)
        margin-left 0
</style>
